<template>
  <div class="age">
    <div class="top">
      <div class="title">
        <div>年龄比列</div>
        <img src="@/views/screen/images/dataScreen-title.png" alt="">
      </div>
    </div>
    <div class="chart" ref="chart">

    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const chart = ref()
onMounted(() => {
  const myChart = echarts.init(chart.value)
  const data = [
          { value: 2, name: "10岁以下" },
          { value: 7, name: "18-23岁" },
          { value: 8, name: "23-30岁" },
          { value: 6, name: "30-39岁" },
          { value: 4, name: "40-49岁" },
          { value: 3, name: "50岁以上" }
  ]
  // 响应屏幕大小
  // window.addEventListener('resize', () => {
  //   myChart.resize()
  // }, false)
  let option = {
    title: {
      text: '年龄比例',
      left: '30%',
      textStyle:{
        color:'#fff',
      }
    },
    tooltip: {},
    legend: {
      data: data,
      right: 40,
      top: 10,
      orient: "verical",
      textStyle:{
        color:'#fff',
        fontSize:16
      }
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie', //表类型
        data: data,
        center: ['40%', '50%'],
        radius: ["40%", "70%"], //饼图半径
        avoidLabelOverlap: false,
        label: {
          show:true,
          position: 'inside',
          color:'#fff'
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})
</script>

<style lang="scss" scoped>
.age {
  width: 100%;
  height: 300px;
  background: url(@/views/screen/images/dataScreen-main-cb.png)no-repeat;
  background-size: 100% 100%;
  .top {
    .title {
      color: white;
      font-size: 22px;
      padding-left: 10px;
    }
  }
  .chart {
    width: 100%;
    height: 230px;
  }
}
</style>
